<template>
	<view class="page">
		<view class="nav-scroll">
			<view class="nav uni-nav">
				<view class="nav-item tab" :class="swiperIndex == 0 ? 'nav-item-act' : ''" @click="taggleNav(0)">VIP
				</view>
				<view class="nav-item tab" :class="swiperIndex == 1 ? 'nav-item-act' : ''" @click="taggleNav(1)">充值
				</view>
				<view class="nav-line" :style="style"></view>
			</view>
		</view>
		<!-- <view class="geban">隔板</view> -->
		<view class="swiper">
			<swiper :disable-touch="touch" :current="swiperIndex" :duration="300" class="swiper-1" easing-function="linear"
				@change="swiperChange" :style="{ height: windowheight + 'px' }">
				<swiper-item @touchmove="touchmove" @touchstart="touchstart">
					<vip :vipdata="vipdata"></vip>
				</swiper-item>
				<swiper-item @touchmove="touchmove" @touchstart="touchstart">
					<chongzhi :czdata="czdata"></chongzhi>
				</swiper-item>

			</swiper>

		</view>

	</view>
</template>

<script>
	import chongzhi from './chongzhi.vue';
	import vip from './vip.vue';
	export default {
		components: {
			chongzhi,
			vip,
		},
		data() {
			return {
				swiperIndex: 0, //当前的swiperindex
				touch:false, //是否允许滑动
				touchStart:0,//第一次滑动的位置
				navItemWidth: '', //选中下划线的宽度
				navItemLeft: 0, //选中下划线的显示位置
				scrollToLeft: 0, //scrollview需要滚动的距离
				navInfos: [], //所有navitem的节点信息
				parentLeft: 0, //nav盒子的节点信息
				componentWidth: 0, //nav盒子的宽度
				refreStatus: false,
				selectedPaymentMethod: '',
				type: 0,
				vipdata: [],
				czdata: [],
				windowheight: '',//可视高度
				items: [{
						value: "alipay",
						name: '支付宝',
						checked: true
					},
					{
						value: "wechat",
						name: '微信',
						checked: false
					}
				]
			};
		},
		created() {
			this.windowheight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad() {
			this.$api.checklogin();
			let uid = uni.getStorageSync('uid');
			let token = uni.getStorageSync('token');
			if(!token || !uid){
				this.login();
			}
			this.getVipListNew();
		},
		onUnload() {
		},
		computed: {
			style() {
				return `width:${this.navItemWidth}px; left:${this.navItemLeft}px`;
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			// VIP充值列表
			getVipListNew(){
				var token = '';
				var uid = 0;
				if(uni.getStorageSync('token')){
					token = uni.getStorageSync('token');
					uid = uni.getStorageSync('uid');
				}
				this.$api.sendRequest({
					data:{
						service:'Vip.getVipListNew',
						uid:uid,
						token:token,
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.vipdata = param;
							// console.log(param)
							// this.list = param.list;
						}
					}
				});
			},
			login(){
				uni.redirectTo({
					url: "/pages/login/login",
				})
			},
			touchstart(res){
				this.touchStart = res.touches[0].clientX;
			},
			touchmove(res){
				if(this.swiperIndex == 0){
					res.touches[0].clientX> this.touchStart ? this.touch = true : this.touch = false;
					//如果滑动到了第一项，就禁止再向左滑动
				}else if(this.swiperIndex == 1){
					res.touches[0].clientX< this.touchStart ? this.touch = true : this.touch = false;
					//如果滑动到了最后一项，就禁止向右滑动
				}else{
					//以上条件都不符合，就随便滑动
					this.touch = false
				}
			},
			// 获取dom信息
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.uni-nav').fields({
					rect: true,
					size: true
				}, res => {
					this.parentLeft = res.left;
					this.componentWidth = res.width;
					// console.log('res==>', res);
				});
				query.selectAll('.nav-item').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						if (index == 0) {
							this.navItemWidth = item.width;
							this.navItemLeft = item.left;
						}
						this.navInfos.push({
							width: item.width,
							left: item.left
						});
					});
				});
				query.exec();
			},
			// 点击导航切换swiper
			taggleNav(val) {
				this.swiperIndex = val;
			},
			opentype(id) {
				this.type = id;
			},
			// 滚动tabs以及移动下划线
			scrollDom() {
				let info = this.navInfos[this.swiperIndex];
				let offsetLeft = info.left - this.parentLeft;
				let scrollLeft = offsetLeft - (this.componentWidth - info.width) / 2;
				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
				this.navItemLeft = this.navInfos[this.swiperIndex].left;
				setTimeout(() => {
					this.navItemWidth = info.width;
				}, 50);
			},
			radioChange(e) {
				this.selectedPaymentMethod = e.detail.value;
			},
			// swiper的index变动
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
				this.scrollDom();
				// this.$emit('currentIndex', this.swiperIndex);
			},
			// tabs-scrollview触底
			handleScroll(e) {
				// this.scrollDom();
			},
			// swiper-ScrollLower触底
			swiperScrollLower() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: `此时为${this.list[this.swiperIndex].title}触底`
				// });
				// setTimeout(() => {
				// 	this.getData();
				// }, 500);
			},
			// 生成列表数据
			getData() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				// setTimeout(() => {
				// 	for (let index = 0; index < 10; index++) {
				// 		let arr = this.list[this.swiperIndex].content;
				// 		this.$set(arr, arr.length, Math.random() + '-' + index + this.list[this.swiperIndex]
				// 		.title);
				// 	}
				// 	uni.hideLoading();
				// }, 1000);
				// console.log(this.list[this.swiperIndex]);
			},
			// 下拉事件
			handleRefre() {
				// this.refreStatus = true;
				// uni.showLoading({
				// 	title: '下拉加载中'
				// });
				// setTimeout(() => {
				// 	this.list[this.swiperIndex].content = [];
				// 	for (var i = 0; i < 5; i++) {
				// 		this.list[this.swiperIndex].content.push([this.list[this.swiperIndex].title + '下拉-' + i]);
				// 	}
				// 	uni.hideLoading();
				// }, 1000);
				// setTimeout(() => {
				// 	this.refreStatus = false;
				// }, 1000);
			}
		}
	};
</script>

<style lang="scss">
	page,
	.page {
		height: 100%;
	}
	
	.nav-scroll {
		width: 100%;
		background: #ffffff;
		height: 100rpx;
		z-index: 999;
		position: fixed;
		top: 0;
		.nav {
			white-space: nowrap;
			position: fixed;
			height: 100upx;
			z-index: 999;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			padding: 0 20rpx;
			.nav-item {
				display: inline-block;
				margin: 0 16upx;
				text-align: center;
				transition: color 0.3s ease;
			}
			.tab {
				font-size: 40rpx;
				color: #3D3D3D;
				// margin-left: 30rpx;
			}
			
			.nav-item-act {
				color: #1D1D1D;
				font-size: 40rpx;
				font-weight: bold;
			}
			.nav-line {
				position: absolute;
				bottom: 0;
				height: 10upx;
				border-radius: 10upx;
				background-color: #C089FF;
				transition: left 0.3s ease;
			}
		}
	}
	

	/* #ifndef APP-NVUE */
	::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
	}

	/* #endif */
	

	swiper {
		// height: 100vh;
		// height: calc(100vh - 88upx);
	}

	.swiper {
		margin-top: 100rpx;
	}

	swiper-item {
		height: 100%;
		// text-align: center;
		color: #000;
		// position: relative;
		// background-color: skyblue;
		// color: #fff;
	}

	.swiper-item {
		// overflow-y: scroll;
		// height: 100%;
		// overflow-y: auto;
	}


	.swiper-scroll {
		overflow-y: scroll;
		// height: 100%;
	}
</style>
